<template>
     <baidu-map class="bm-view" :zoom="zoom" :center="location" :scroll-wheel-zoom="true" @ready="mapReady">
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <bm-marker v-for="item in markerData" :key="item.title" :position="item.location" :dragging="true"
            @dragend="dragend" :icon="{ url: item.icon, size: { width: 300, height: 157 } }">
            <bm-label :content="item.title" :labelStyle="{ color: 'red', fontSize: '12px' }"
                :offset="{ width: 100, height: 10 }" />
        </bm-marker>
    </baidu-map>
</template>

<script setup lang="ts">
import { useGeocoder, usePoint } from 'vue-baidu-map-3x';
const zoom = ref(12);

const location = reactive({ });



const markerData = ref([{
    title: '', location: { lng:'', lat: '' },
    icon: 'http://developer.baidu.com/map/jsdemo/img/fox.gif',
}
])

const mapReady = ({BMap,map}) =>{

   let points = markerData.value.map((item: any) => {
        return new BMap.Point(item.location.lng, item.location.lat)
   }) 

        map.setViewport(points)
    }

    
const dragend = (e) => {
        useGeocoder().then((geocoder: any) => {

            usePoint(e.point.lng, e.point.lat).then((point: any) => {
                geocoder.getLocation(point, (result: any) => {
                    console.log(result.address + result.content.poi_desc);
                });
            });
        });
    };

</script>

<style>
.bm-view {
    width: 100%;
    height: 600px;
}
</style>